<template>
<section class="page-container">
  <el-card class="box-card">
    <el-form :inline="true">
				<el-form-item style="margin-bottom: 0;">
					<el-input v-model="compQuery.nameLk" placeholder="企业名称"></el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 0;">
					<el-button type="primary" v-on:click="getList">查询</el-button>
				</el-form-item>
				<el-form-item style="margin-bottom: 0;">
					<el-button type="primary" plain @click="handleAdd" v-if="false">新增</el-button>
				</el-form-item>
			</el-form>
  </el-card>
  <br>
  <el-table :data="companies" highlight-current-row v-loading="listLoading" style="width: 100%;">
    <el-table-column type="index" width="60" :index="getListIndex"></el-table-column>
    <el-table-column prop="name" label="名称" width="200"></el-table-column>
    <el-table-column label="认证状态" width="200">
      <template slot-scope="scope">
        {{scope.row.verifyStatus | companyStatus}}
      </template>
    </el-table-column>
    <el-table-column prop="city" label="城市" width="120"></el-table-column>
    <el-table-column label="推荐日期" width="200">
      <template slot-scope="scope">
        {{scope.row.recommendDate | date}}
      </template>
    </el-table-column>
    <el-table-column prop="createdAt" label="注册时间" width="200"></el-table-column>
    <el-table-column>
      <template slot-scope="scope">
        <el-button size="mini" type="primary" plain @click="recommend(scope.$index)">推荐首页</el-button>
        <el-button size="mini" type="warning" plain v-if="!!scope.row.recommendDate" @click="cancelRecommend(scope.$index)">取消推荐</el-button>
        <el-button size="mini" type="primary" plain v-if="scope.row.verifyStatus != 2"
          @click="openApproveBox(scope.$index)">审核</el-button>
        <el-button size="mini" @click="openApproveHistoryBox(scope.$index)">审核记录</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <el-pagination background layout="prev, pager, next" :page-size="compQuery.pageSize"
    :total="compQuery.total" :current-page="compQuery.pageNo" @current-change="getPage"></el-pagination>

  <el-dialog title="企业审核" :visible.sync="showApproveDialog">
    <h3>{{companies[currentIndex] && companies[currentIndex].name}}</h3>
    <el-radio v-model="approve.approved" label="true">审批通过</el-radio>
    <el-radio v-model="approve.approved" label="false">审批不通过</el-radio>
    <br><br>
    <el-input type="textarea" v-model="approve.message"
      :rows="2" placeholder="备注消息">
    </el-input>
    <el-button slot="footer" type="primary" @click="approveComp()"
      :disabled="approve.approved === null">提交</el-button>
  </el-dialog>

  <el-dialog title="审核记录" :visible.sync="showApproveHistoryDialog">
    <h3>{{companies[currentIndex] && companies[currentIndex].name}}</h3>
    <el-table :data="approves" highlight-current-row v-loading="approveListLoading" style="width: 100%;">
      <el-table-column type="index" width="60" :index="getApproveIndex"></el-table-column>
      <el-table-column prop="managerName" label="管理员姓名" width="120"></el-table-column>
      <el-table-column prop="createdAt" label="申请时间" width="200"></el-table-column>
      <el-table-column prop="operationTime" label="审核时间" width="200"></el-table-column>
      <el-table-column prop="operationTime" label="审核结果" width="200">
        <template slot-scope="scope">
          <el-tag plain type="success" v-if="scope.row.state==1">通过</el-tag>
          <el-tag plain type="warning" v-else>未过</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="审批消息" width="500"></el-table-column>
    </el-table>
    <br>
    <el-pagination background layout="prev, pager, next" :page-size="apprPager.pageSize"
      :total="apprPager.total" :current-page="apprPager.pageNo" @current-change="getApprovePage"></el-pagination>
  </el-dialog>
</section>
</template>
<script>
import * as Company from '@/api/company'
import * as District from '@/api/district'

export default {
  data() {
    return {
      listLoading: false,
      approveListLoading: false,
      showApproveDialog: false,
      showApproveHistoryDialog: false,
      currentIndex: -1,
      approve: {
        approved: null,
        message: ''
      },
      companies: [],
      compQuery: { pageNo: 1, pageSize: 20, total: 0 },
      approves: [],
      apprPager: { pageNo: 1, pageSize: 20, total: 0 }
    }
  },
  created() {
    this.getList(1)
  },
  methods: {
    onSubmit() {
      console.log('submit')
    },
    recommend(index) {
      Company.recommend(this.companies[index].id)
        .then(() => {
          this.companies[index].recommendDate = new Date()
        })
        .catch(ex => {
          this.$message.error(ex.message)
        })
    },
    cancelRecommend(index) {
      Company.cancelRecomment(this.companies[index].id)
        .then(() => {
          this.companies[index].recommendDate = ''
        })
        .catch(ex => {
          this.$message.error(ex.message)
        })
    },
    getListIndex(index) {
      return (this.compQuery.pageNo - 1) * this.compQuery.pageSize + index + 1
    },
    getPage(page) {
      this.listLoading = true
      this.compQuery.pageNo = page
      Company.getList(this.compQuery)
        .then(data => {
          this.listLoading = false
          data.forEach(d => District.getDistrictName(d.cityId).then(n => { this.$set(d, 'city', n) }))
          this.companies = data
        })
        .catch(ex => {
          this.listLoading = false
          this.$message.error(ex.message)
        })
    },
    getList() {
      this.getPage(1)
      Company.count()
        .then(data => {
          this.compQuery.total = data
        })
        .catch(ex => {
          this.$message.error(ex.message)
        })
    },
    handleAdd() {

    },
    openApproveBox(index) {
      if (index !== this.currentIndex) {
        this.approve = { approved: null, message: '' }
        this.currentIndex = index
      }
      this.showApproveDialog = true
    },
    getApproveIndex(index) {
      return (this.apprPager.pageNo - 1) * this.apprPager.pageSize + index + 1
    },
    openApproveHistoryBox(index) {
      if (index !== this.currentIndex) {
        this.currentIndex = index
        this.getApprovePage(this.apprPager.pageNo)
        Company.getApprovalCount(this.companies[this.currentIndex].id)
          .then(data => {
            this.apprPager.total = data
          })
          .catch(ex => {
            this.$message.error(ex.message)
          })
      }
      this.showApproveHistoryDialog = true
    },
    getApprovePage(page) {
      this.approveListLoading = true
      this.apprPager.pageNo = page
      Company.getApprovalList(this.companies[this.currentIndex].id, this.apprPager.pageNo, this.apprPager.pageSize)
        .then(data => {
          this.approves = data
          this.approveListLoading = false
        })
        .catch(ex => {
          this.$message.error(ex.message)
        })
    },
    approveComp() {
      Company.approve(this.companies[this.currentIndex].id, this.approve.approved, this.approve.message)
        .then(() => {
          this.showApproveDialog = false
          this.$message.success('提交成功')
          this.companies[this.currentIndex].verifyStatus = this.approve.approved ? 2 : 3
        })
        .catch(ex => {
          this.$message.error(ex.message)
        })
    }
  },
  filters: {
    companyStatus(status) {
      switch (status) {
        case 0:
          return '未认证'
        case 1:
          return '待审核'
        case 2:
          return '认证成功'
        case 3:
          return '认证失败'
      }
    }
  }
}
</script>
